Helpful Information
 
 
Category: SVG
SVG -> XSLT -> SVG

Hi,

I'm trying to play around with 2 examples from the web, whereby i use xslt to transform svg to svg.
but somehow, doesn't seem to work in IE6 on windows.
Am I doing something wrong?

input
http://www.jarra.nl/_TEST/in01.svg

XSLT
http://www.jarra.nl/_TEST/triangularA01.xsl

thanks,
jarra

[bump]
no-one..?

tryin to figure out what is supposed to happen here, so ya can ya tell me :)

im the winner!

svg file:


<?xml version="1.0" encoding="ISO-8859-1" ?>
<?xml-stylesheet type="text/xsl" href="triangularA01.xsl"?>
<svg viewBox="0 0 300 300">
<style type="text/css">
text {font-size:13; font-family:monospace}
</style>
<g transform="scale(10) translate(2 2)">
<path fill="#f9c" d="M0 0,2 0,1 1.732 z" transform="scale(10) translate(1 1)"/>
</g>
<text>
<tspan x="10" y="90">level of depth:</tspan>
<!-- set the level of depth (don't overdo it ;) 8 is pretty high)-->
<tspan x="10" y="100" id="level_of_depth">3</tspan>
<tspan x="10" y="120">view all levels:</tspan>
<!-- to see all levels of depth, set to 'true'to see a only one level of depth, set to 'false' -->
<tspan x="10" y="130" id="view_all">true</tspan>
<tspan x="10" y="150">background-color:</tspan>
<!-- set the background-color -->
<tspan x="10" y="160" id="background_color">#000</tspan>
</text>
</svg>




xslfile:


<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xlink="http://www.w3.org/1999/xlink">

<xsl:param name="depth" select="//tspan[@id='level_of_depth']"/>
<xsl:param name="view_all" select="//tspan[@id='view_all']"/>
<xsl:output method="xml" version="1.0" encoding="UTF-8" indent="yes"/>
<xsl:strip-space elements="*"/>
<xsl:template match="/" name="main">

<svg viewBox="{svg/@viewBox}">
<defs>
<g id="level_0" transform="scale(0.1)">
<xsl:copy-of select="//g/descendant::*"/>
</g>
<xsl:apply-templates/>
</defs>
<rect style="fill:{//tspan[@id='background_color']}" x="-100%" y="-100%" width="100%" height="100%"/>
<xsl:call-template name="use"/>
</svg>
</xsl:template>

<xsl:template match="g" name="go">
<xsl:param name="current" select="0"/>
<g id="level_{$current+1}">
<use xlink:href="#level_{$current}" transform="matrix(0.5 0 0 0.5 0 0)"/>
<use xlink:href="#level_{$current}" transform="matrix(0.5 0 0 0.5 1 0)"/>
<use xlink:href="#level_{$current}" transform="matrix(0.5 0 0 0.5 0.5 0.866)"/>
</g>
<!--<xsl:apply-templates/>-->
<xsl:if test="$current&lt;($depth)-1">
<xsl:call-template name="go">
<xsl:with-param name="current" select="$current+1"/>
</xsl:call-template>
</xsl:if>
</xsl:template>

<xsl:template name="use">
<xsl:param name="current" select="0"/>
<xsl:choose>
<xsl:when test="$view_all = 'true'">
<use opacity="{(1 div ($depth+1)) * ($current + 1)}" xlink:href="#level_{$current}" transform="translate(30,30) scale(120)"/>
<xsl:if test="$current&lt;($depth)">
<xsl:call-template name="use">
<xsl:with-param name="current" select="$current+1"/>
</xsl:call-template>
</xsl:if>
</xsl:when>
<xsl:otherwise>
<use xlink:href="#level_{$depth}" transform="translate(30,30) scale(120)"/>
</xsl:otherwise>
</xsl:choose>
</xsl:template>

<xsl:template match="//text"/>
<xsl:template match="//style"/>
</xsl:stylesheet>



output


<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 300 300">
<defs>
<g id="level_0" transform="scale(0.1)">
<path fill="#f9c" d="M0 0,2 0,1 1.732 z" transform="scale(10) translate(1 1)"/>
</g>
<g id="level_1">
<use xlink:href="#level_0" transform="matrix(0.5 0 0 0.5 0 0)"/>
<use xlink:href="#level_0" transform="matrix(0.5 0 0 0.5 1 0)"/>
<use xlink:href="#level_0" transform="matrix(0.5 0 0 0.5 0.5 0.866)"/>
</g>
<g id="level_2">
<use xlink:href="#level_1" transform="matrix(0.5 0 0 0.5 0 0)"/>
<use xlink:href="#level_1" transform="matrix(0.5 0 0 0.5 1 0)"/>
<use xlink:href="#level_1" transform="matrix(0.5 0 0 0.5 0.5 0.866)"/>
</g>
<g id="level_3">
<use xlink:href="#level_2" transform="matrix(0.5 0 0 0.5 0 0)"/>
<use xlink:href="#level_2" transform="matrix(0.5 0 0 0.5 1 0)"/>
<use xlink:href="#level_2" transform="matrix(0.5 0 0 0.5 0.5 0.866)"/>
</g>
</defs>
<rect style="fill:#000" x="-100%" y="-100%" width="100%" height="100%"/>
<use opacity="0.25" xlink:href="#level_0" transform="translate(30,30) scale(120)"/>
<use opacity="0.5" xlink:href="#level_1" transform="translate(30,30) scale(120)"/>
<use opacity="0.75" xlink:href="#level_2" transform="translate(30,30) scale(120)"/>
<use opacity="1" xlink:href="#level_3" transform="translate(30,30) scale(120)"/>
</svg>

I grabbed these examples from the web:
http://www.pinkjuice.com/svg/xslt/fractals/

trying to play around with it, to teach me a bit of svg + xslt.
But it's not working at all ;-(


thanx,
jarra

look up :)

edit:
crud I just realized I did that with php to perform the actual transformation....Im losin my mind, Ill look at it some more...

I got your pm and decided to respond here, so that others that might have questions can see them.

I cannot figure out why its not functioning properly with IE or Firefox using Adobe SVG viewer. Now I have got it to function with the php libxslt/libxml parser. This has me a little baffled. Either the php parser is to lax or the code is bad ???

-Teflon

thanx,
;-)










privacy (GDPR)